<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>v-if&v-else&v-show</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-if&v-else&v-show</h1>
    <a href="../index.html">返回</a>
    <hr/>
    <div id="app">

        <div v-if="isLogin">欢迎登录: {{username}}</div>
        <div v-else>你好，请登录</div>
        <hr/>
        <label>v-show</label>
        <div v-show="isLogin">欢迎：{{username}}</div>
        <hr/>
        v-if 判断是否加载，可以减轻服务器压力，在需要时加载<br/>
        v-show 调整css dispaly 属性，可以使客户端操作更加流畅

    </div>

    <script>
            var app= new Vue({
                el:"#app",
                data:{
                    isLogin:true,
                    username:"zhangsan",
                    message:"hello world"
                }
            })
        </script>
</body>
</html>